<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>产品</title>
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta http-equiv="Cache-Control" content="no-transform">
		<meta name="format-detection" content="telephone=no">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<link rel="stylesheet" href="style/css/basic.css" />
		<link rel="stylesheet" href="style/css/product.css" />
		<script type="text/javascript" src="style/plugin/mui/js/mui.min.js"></script>
		<script type="text/javascript" src="style/js/jquery-1.8.3.min.js"></script>
		<script type="text/javascript" src="style/mockjs/dist/mock.js"></script>
		<script type="text/javascript" src="style/js/vue.min.js"></script>
		<script type="text/javascript" src="style/js/vue-resource.js"></script>
		<script type="text/javascript" src="style/js/basic.js"></script>
	</head>
	<body>
		<div id="product">
		    <div id="header">
				<h1>商城</h1>
				<span class="backicon"></span>
			</div>
			<div class="body">
				<div class="list" id="refreshContainer">
					<ul>
						<li v-for="(pro,index) in productList" v-if="productList!=''" @tap.prevent="jumpdetail(index)">
							<a href="javascript:;">
								<div class="list_left_img">
									<img :src="htp+pro.thumb_pic">
								</div>
								<div class="list_right_text">
									<span>{{pro.title}}</span>
									<span class="gray">库存：{{pro.stock}}{{pro.unit}}</span>
									<span class="text_color">价格：￥<strong>{{pro.price}}</strong></span>
								</div>
							</a>
							<div class="addcar" @tap.stop="addCar(index)"></div> 
	
						</li>
					</ul>
				</div> 
				
				<div class="slide_car" @tap="jumpCar"><a href="javascript:;"><span v-if="flag==1"></span></a></div>
			</div>
			
			<!--footer-->
			<div class="footer" id="footer">
				<ul class="clearfix">
					<li>
						<a href='agent_index.html' target="_blank"><i class="icon_home"></i><span>首页</span></a>
					</li>
					<li>
						<a href="product.html" target="_blank"><i class="icon_mall"></i><span class="active_color">商城</span></a>
					</li>
					<li>
						<a href='integral_mall.html' target="_blank"><i class="icon_integral"></i><span>积分</span></a>
					</li>
					<li>
						<a href='agent_my.html' target="_blank"><i class="icon_my"></i><span>我的</span></a>
					</li>
				</ul>
			</div>	
		</div>
		
		<script>
			new Vue({
				el:"#product",
				data:{
					flag:0,
					productList:"",
					htp:"",
					ticket:"",
				    sign:""
				},
				methods:{
					addCar:function(addIndex){ 
						var gId=this.productList[addIndex].good_no
						//添加产品到购物车
						this.$http.post(domain+"/cart/create?t="+this.ticket+"&sign="+this.sign,{good_no:gId,num:1,type:1},{emulateJSON:true}).then(
				            function (res) {
				                // 处理成功的结果  
				                if(res.body.code==1){
				                  mui.toast("添加成功")
				                  this.flag=1
				                }else{
				                	mui.toast(res.body.msg)
				                }
				            },function (res) {
				            // 处理失败的结果
				            console.log(res) 
				            }
				        )
					},
					jumpdetail:function(jIndex){
						var gId=this.productList[jIndex].good_no
						mui.plusReady(function(){
							mui.openWindow({
								url:"details.html",//跳转页面
								extras:{
									goodsId:gId//页面传值
								},
								waiting:{
	                                autoShow:false//自动显示等待框，默认为true
	                            }
							})
						})
					},
					jumpCar:function(){
						this.flag=0
						openurl("cart_list")
					},
					pullrefesh:function(){
						
					}
				},
				created:function(){
					//获取商品列表
					this.ticket=localStorage.getItem("tick")
                    this.sign=localStorage.getItem("sig")
                    this.flag=localStorage.getItem("cart") 
                    console.log(this.flag)
					
				},
				mounted:function(){
					var p=1;
					var that=this; 
					that.htp=domain2;
					mui.plusReady(function(){
						mui.init({
						  pullRefresh : {
						    container:"#refreshContainer",//下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
						    down : {
						      style:'circle',//必选，下拉刷新样式，目前支持原生5+ ‘circle’ 样式
						      color:'#2BD009', //可选，默认“#2BD009” 下拉刷新控件颜色
						      height:'50px',//可选,默认50px.下拉刷新控件的高度,
						      range:'100px', //可选 默认100px,控件可下拉拖拽的范围
						      offset:'0px', //可选 默认0px,下拉刷新控件的起始位置
						      contentdown:null,
						      auto: true,//可选,默认false.首次加载自动上拉刷新一次
						      callback :pullrefesh  	      
						    }
						  }
						}); 
					})
					function pullrefesh(){
						that.$http.post(domain+"/good/getList?t="+that.ticket+"&sign="+that.sign,{
						      	page_id:p++,
						      	page_size:2
						      },{emulateJSON:true}).then(
					            function (res) {
					                // 处理成功的结果
					                console.log(res.body)
					                if(res.body.code==1){
					                	if(res.body.data.length==0){
						                	mui.toast("没有更多了")
						                	return false;
						                }
					                    that.productList=res.body.data.list;
					                }else{
					                	mui.toast("暂无商品")
					                }
					            },function (res) {
					            // 处理失败的结果
					            console.log(res) 
					            }
					        ).then(function(){
					        	mui('#refreshContainer').pullRefresh().endPulldownToRefresh();   
					        });
						
					}
				}
			})
		</script>
	</body>
</html>
